<%@ tag language="java" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<%@ attribute name="id" type="java.lang.String" required="true" description="编号"%>
<%@ attribute name="name" type="java.lang.String" required="true" description="输入框名称"%>
<%@ attribute name="value" type="java.lang.String" required="true" description="输入框值"%>
<style type="text/css">
	.the-icons {list-style:none;}
	.the-icons li {float:left;width:22%;line-height:25px;margin:2px 5px;cursor:pointer;}
	.the-icons i {margin:1px 5px;} .the-icons li:hover {background-color:#efefef;}
	.the-icons li.active {background-color:#0088CC;color:#ffffff;}
</style>
<i id="${id}Icon" class="${not empty value ? value : 'hide'}"></i>&nbsp;<label id="${id}IconLabel">${not empty value ? value : '无'}</label>&nbsp;
<input id="${id}" name="${name}" type="hidden" value="${value}"/>
<a id="${id}Button" href="javascript:" class="btn btn-sm btn-primary" style="margin-left: 10px;">选择</a>&nbsp;&nbsp;
<div class="modal fade" id="iconModal">
	<div class="modal-dialog" style="width: 700px;">
		<div class="modal-content">
			<div class="modal-header" style="height: 40px;padding: 5px;">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close" style="font-size: 20px; "><span aria-hidden="true">&times;</span></button>
				<h4 class="modal-title">请选择图标</h4>
			</div>
			<div class="modal-body" style="padding: 4px; ">
				<ul class="the-icons" id="icons">
					<li><i class="fa fa-glass"></i>fa-glass</li>
					<li><i class="fa fa-leaf"></i>fa-leaf</li>
					<li><i class="fa fa-folder"></i>fa-folder</li>
					<li><i class="fa fa-folder-o"></i>fa-folder-o</li>
					<li><i class="fa fa-folder-open"></i>fa-floder-open</li>
					<li><i class="fa fa-folder-open-o"></i>fa-floder-open-o</li>
					<li><i class="fa fa-gear"></i>fa-gear</li>
					<li><i class="fa fa-image"></i>fa-image</li>
					<li><i class="fa fa-reorder"></i>fa-reorder</li>
					<li><i class="fa fa-server"></i>fa-server</li>
					<li><i class="fa fa-tachometer"></i>fa-tachometer</li>
					<li><i class="fa fa-bar-chart"></i>fa-bar-chart</li>
					<li><i class="fa fa-user"></i>fa-user</li>
					<li><i class="fa fa-users"></i>fa-users</li>
					<li><i class="fa fa-user-plus"></i>fa-user-plus</li>
				</ul>
			</div>
			<div class="modal-footer" style="padding-top: 5px;padding-bottom: 5px;clear: both; ">
				<button type="button" class="btn btn-default btn-sm" data-dismiss="modal">关闭</button>
				<button type="button" class="btn btn-warning btn-sm" id="btnClearIcon">清除</button>
				<button type="button" class="btn btn-primary btn-sm" id="btnSureIcon">选择</button>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript">
	$(document).ready(function(){
		$("#icons li").click(function(){
			$("#icons li").removeClass("active");
			$("#icons li i").removeClass("icon-white");
			$(this).addClass("active");
			$(this).children("i").addClass("icon-white");
		});
		$("#icons li").each(function(){
			if ($(this).text()=="${value}"){
				$(this).click();
			}
		});
		$("#icons li").dblclick(function(){
			$("#btnSureIcon").trigger("click");
		});


		$("#${id}Button").click(function(){
			$("#iconModal").modal();
		});

		//选择事件
		$("#btnSureIcon").click(function(){
			var iconClass = $("#icons").find("li.active").text();
			$("#${id}Icon").attr("class", "fa "+iconClass);
			$("#${id}IconLabel").text(iconClass);
			$("#${id}").val(iconClass);
			$("#iconModal").modal("hide");
		});

		//清除图标
		$("#btnClearIcon").click(function(){
			$("#${id}Icon").attr("class", "hide");
			$("#${id}IconLabel").text("无");
			$("#${id}").val('');
			$("#iconModal").modal("hide");
		});
	});
</script>